﻿<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<script type="text/javascript" src="../../js/jquery-1.12.4.js" ></script>
<script>
	var i=0;
	var arrays=new Array("images/adver01.jpg","images/adver02.jpg","images/adver03.jpg","images/adver04.jpg","images/adver05.jpg","images/adver06.jpg");
	$(function(){
		$(".adver").mouseover(function(){
			$(".arrowLeft").show().next().show();
		}).mouseout(function(){
			$(".arrowLeft").hide().next().hide();
		});
		$(".arrowLeft").click(function(){
			$("li:nth-of-type("+(i+1)+")").css("background","#333333");
			if(i==0){
				i=5;
			}else{
				i=i-1;
			}
			
			$("li:nth-of-type("+(i+1)+")").css("background","orangered");
			
			$(".adver").css("background-image","url("+arrays[i]+")");
		});
		$(".arrowRight").click(function(){
			$("li:nth-of-type("+(i+1)+")").css("background","#333333");
			if(i==5){
				i=0;
			}else{
				i=i+1;
			}
			
			$("li:nth-of-type("+(i+1)+")").css("background","orangered");
			
			$(".adver").css("background-image","url("+arrays[i]+")");
		});
		$("li").click(function(){
			$("li").css("background","#333333");
			var num=$(this).html();
			alert(num);
			$(this).css("background","orangered");
			i=num-1;
			$(".adver").css("background-image","url("+arrays[i]+")");
		});
	});
</script>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>